<template>
  <div>
      <!-- 搜索卡片区 -->
    <el-card class="box-card">
      <!-- 命名插槽，头部内容 -->
      <div slot="header" class="clearfix">
          <span>修改文章</span>
      </div>
      <!-- 匿名插槽，内容主体 -->
      <div class="text item">
        <!-- el-form搜索表单区域 -->
        <!-- prop跟校验规则相连接 -->
        <!-- rules表单校验规则 -->
        <el-form ref="editFormRef" :model="editForm" label-width="120px" :rules="editFormRules">
            <el-form-item label="标题" prop='title'>
                 <el-input v-model="editForm.title"></el-input>
            </el-form-item>

            <el-form-item label="内容" prop="content">
              <quill-editor v-model="editForm.content"></quill-editor>
            </el-form-item>

            <el-form-item label="封面">
              <el-radio-group v-model="editForm.cover.type">
              <!-- label是属性绑定，其值由下方addForm.cover.type决定，要求为整型 -->
                  <el-radio  :label="1">单图</el-radio>
                  <el-radio  :label="3">三图</el-radio>
                  <el-radio  :label="0">无图</el-radio>
                  <el-radio  :label="-1">自动</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="频道" prop='channel_id'>
              <!-- <el-select v-model="editForm.channel_id" placeholder="请选择" clearable >
                   <el-option
                      v-for="item in channelList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                   </el-option>
              </el-select> -->
              <channel-com @slt='selectHandler' :cid='editForm.channel_id'></channel-com>
            </el-form-item>
            <!-- 按钮 -->
            <el-form-item>
              <!-- true为存入草稿，false为发布 -->
              <el-button type="primary" @click="editArticle(false)">发布</el-button>
              <el-button @click="editArticle(true)">存入草稿</el-button>
            </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>

// 引入富文本编辑器相关CSS文件
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 导入富文本编辑器模块(es6模块化按需导入)
import { quillEditor } from 'vue-quill-editor'
// 导入频道独立组件、
import channelCom from '@/components/channel.vue'

export default {
  name: 'articleedit',
  created () {
    // this.getChannels()
    this.getArticleById()
  },
  // 注册富文本编辑器模块
  components: {
    quillEditor,
    channelCom
  },
  data () {
    return {
      // 配置表单校验规则
      editFormRules: {
        title: [
          { required: true, message: '标题必填' },
          { min: 5,
            max: 30,
            message: '标题长度介于5-30个字符' }
        ],
        content: [{ required: true, message: '内容必填' }],
        channel_id: [{ required: true, message: '频道必选' }]
      },
      // channelList: [],
      editForm: {
        title: '',
        content: '',
        channel_id: '',
        // 图片
        cover: {
          type: 0, // 封面类型 -1:自动，0-无图，1-1张，3-3张
          images: []
        }
      }
    }
  },
  computed: {
    // 给路由参数做简化设置
    aid () {
      return this.$route.params.aid
    }
  },
  methods: {
    // 声明selectHandler方法
    selectHandler (val) {
      this.editForm.channel_id = val
    },
    // 根据id获取修改信息
    getArticleById () {
      let pro = this.$http.get(`/articles/${this.aid}`)
      pro
        .then(result => {
          this.editForm = result.data.data
        })
        .catch(err => {
          return this.$message.error('获取修改信息错误' + err)
        })
    },
    // // 获取频道列表
    // getChannels () {
    //   // 通过axios发送请求得到真实频道数据
    //   let pro = this.$http.get('/channels')
    //   pro
    //     .then(result => {
    //       // console.log(result) // config data headers status
    //       // 把获取的频道数据赋给频道列表
    //       this.channelList = result.data.data.channels
    //     })
    //     .catch(err => {
    //       return this.$message.error('获取频道信息错误' + err)
    //     })
    // },
    // 添加文章
    // flag:true  发布一个草稿文章
    // flag:false 发布一个正式文章
    editArticle (flag) {
      // 表单校验
      this.$refs.editFormRef.validate(valid => {
        if (valid) {
          // axios发送请求
          let pro = this.$http.put(`/articles/${this.aid}`, this.editForm, { params: { draft: flag } })
          pro
            .then(result => {
              // console.log(result)
              this.$message.success('修改文章成功')
              this.$router.push('/article')
            })
            .catch(err => {
              return this.$message.error('修改文章失败' + err)
            })
        }
      })
    }
  }
}
</script>

<style lang='less' >
// 深度css样式选择器  el-form为祖先，会被编译为el-form[data-v-xx] .ql-editor,寻找祖先的子集
// ql-editor是浏览器自动解析的class选择器
.el-form /deep/ .ql-editor {
  height: 200px;
}
// 或者可以避免scoped带来的影响，就可以不使用深度作用选择器
// .ql-editor{
//   height: 200px;
// }
</style>
